<template>
	<view class="page-content">
		<u-navbar title="申请成为投资人" :background="background" :border-bottom="false" :is-back="true" title-color="#fff"
			back-icon-color="#fff">

		</u-navbar>
		<image class="bg-user" src="../../static/image/bg-form.png" mode="widthFix"></image>
		<view style="position: relative;z-index: 10;padding-top: 100rpx;">

			<view class="module-step">
				<view class="item" :class="curStep>=item.value?'on':''" v-for="(item,index) in stepList" :key="index">
					<view class="no">
						{{item.value}}
					</view>
					<view class="title fz12 mt10">
						{{item.label}}
					</view>

				</view>
			</view>
			<view class="p12">
				<!-- <view class="bg-white p12" style="min-height: 750rpx;padding-top: 200rpx;" v-if="!showInput">
			
				
				<view class="mt40">
					<view class="btn fz14">查看提交内容</view>
				</view>
				</view> -->
				<view class="bg-white p15  pt24">
					<view class="mb20 lh24" v-if="post.id">

						<image v-if="post.auditStatus==2" src="../../static/image/ic-success.png" class="w40 h40"
							style="display: block;margin: 0 auto;"></image>
						<image v-else src="../../static/image/ic-wrong.png" class="w40 h40"
							style="display: block;margin: 0 auto;"></image>
						<view v-if="post.auditStatus==1" class="apply-tips fz14 u-flex u-f-justify mt10">
							您提交的信息正在审核中，请耐心等待！</view>
						<view v-if="post.auditStatus==3" class="apply-tips fz14 u-flex u-f-justify mt10 "
							style="text-align: center;">您提交的信息没有通过审核，<br>审核原因：{{post.auditStatement}}</view>

						<view v-if="post.auditStatus==2" class="apply-tips fz14 u-flex u-f-justify mt10">您提交的信息已通过审核！
						</view>
					</view>
					<template v-if="addStep==2">
						<view class="p15 fz12" style="background: rgba(242,70,70,0.06);">请仔细阅读以下协议并签名确认！</view>
						<view class="p12 mt15" style="background: #F8F8F8;"></view>
						<view class="fz16 mt20" style="color: #F24646;">请填写以下信息</view>

						<view class="u-f-justify u-font-24 mt20">
							<u-checkbox v-model="checked" shape="circle" active-color="#F24646">
								<view class="u-font-24 pl2" style="line-height:40rpx;">
									我已阅读并同意以上条款，我承诺遵守所有相关规则和条件，并将继续执行后续步骤。</view>
							</u-checkbox>
						</view>
						<view class="mt20">
							<view class="fz14 c3">姓名</view>
							<view class="p12 mt8" style="background: #F8F8F8;">
								<input style="padding: 0;" v-model="post.value" type="text" placeholder="请填写您的姓名" />
							</view>
						</view>
						<view class="mt40">
							<view class="btn fz14" @click="toAdd">提交</view>
						</view>
					</template>
					<template v-if="addStep==1">
						<view>
							<view class="fz14 c3">姓名</view>
							<view class="p12 mt8" style="background: #F8F8F8;">
								<input style="padding: 0;" v-model="post.memberName" type="text"
									placeholder="请填写您的姓名" />
							</view>
						</view>
						<view class="mt18">
							<view class="fz14 c3">手机号码</view>
							<view class="p12 mt8" style="background: #F8F8F8;">
								<input style="padding: 0;" v-model="post.phone" type="text" placeholder="请填写您的手机号码" />
							</view>
						</view>
<view class="mt18">
							<view class="fz14 c3">公司名称</view>
							<view class="p12 mt8" style="background: #F8F8F8;">
								<input style="padding: 0;" v-model="post.company" type="text" placeholder="请填写公司名称" />
							</view>
						</view>

						<view class="mt18" @click="showThreePicker">
							<view class="fz14 c3">所在地区</view>


							<view class="p12 mt8" style="background: #F8F8F8;">
								<view class="areaPicker flex u-f-jsb">
									<view class="placeholder">
										<text>{{post.area || '请选择'}}</text>
									</view>
									<u-icon name="arrow-right" size="24"></u-icon>
								</view>
								<area-picker ref="areaPicker" v-model="showArea" :areaId="post.region"
									:defaultIndex="defaultIndex" @onConfirm="onConfirm" class="fsz26"></area-picker>
							</view>


						</view>
						<view class="mt18">
							<view class="fz14 c3">身份证号码</view>
							<view class="p12 mt8" style="background: #F8F8F8;">
								<input style="padding: 0;" v-model="post.idCard" type="text" placeholder="请填写您的身份证号码" />
							</view>
						</view>
						<view class="mt18">
							<view class="fz14 c3">银行卡绑定</view>

							<view>
								<view @click="selectBank(index)" :class="curBank==index?'on':''"
									v-for="(item,index) in bankList" :key="index">
									<view class="p12 mt8 u-flex u-f-jsb" style="background: #F8F8F8;">
										<span>{{item.memberName}}（{{item.memberCode}}）</span>
										<u-icon v-if="curBank==index" name="checkmark-circle-fill" color="#F24646"
											size="36"></u-icon>
										<u-icon v-else name="checkmark-circle" color="#999" size="36"></u-icon>
									</view>
								</view>
							</view>
							<view @click="showCard=true" v-if="!post.id || post.auditStatus==3" class="p12 mt8 u-flex u-f-justify"
								style="background: #F8F8F8;">
								<u-icon name="plus" class="mr4"></u-icon>添加银行卡
							</view>
						</view>

						<view class="mt40" v-if="!post.id">
							<view class="btn fz14" @click="toAdd()">提交</view>
						</view>
						<view class="mt40" v-if="post.id && post.auditStatus==3">
							<view class="btn fz14" @click="toAdd()">重新提交</view>
						</view>
					</template>
				</view>
			</view>

		</view>

		<u-popup :mask-close-able="false" v-model="showCard" mode="bottom" border-radius="20" :closeable="true">
			<view class="p20">
				<view></view>
				<scroll-view style="height: 750rpx;" scroll-y="true">
					<bankCard @success="bankSuccess"></bankCard>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		apiBaseUrl
	} from '../../config/config.js';
	import {
		getPlatform
	} from '@/config/util.js'
	import bankCard from "@/components/bank-card/index"


	import areaPicker from "@/components/area-picker/areaPicker.vue";
	export default {
		components: {
			bankCard,
			areaPicker
		},
		data() {
			return {
				background: {
					background: 'url(../../static/image/bg-form.png) no-repeat top'
				},
				defaultIndex: [0, 0, 0],
				showArea: false,
				checked: false,
				addStep: 1,
				showInput: false,
				showCard: false,
				isDisabled: false,
				curStep: 1,
				curBank: 0,
				stepList: [{
					label: '填写信息',
					value: 1
				}, {
					label: '等待审核',
					value: 2
				}, {
					label: '审核完成',
					value: 3
				}, ],
				bankList: [],
				post: {

					area:'广东省 深圳市',
					memberName: '',
					phone: '',
					region: 440300,
					idCard: '',
				}
			}
		},
		onLoad() {},
		onShow() {
			this.getBank()
			this.getInfo()
		},
		methods: {
			selectBank(idx){
				
				this.curBank=idx
				// if(this.curBank==idx){
				// 	this.curBank=-1
				// }else{
					
				// 	this.curBank=idx
				// }
			},
			bankSuccess() {
				this.showCard = false
				this.$common.errorToShow('添加成功')
				this.getBank()
			},
			getInfo() {
				this.$api.getSubmit({
					role: 3
				}, (res) => {
					if (res.code == 200) {
						if (res.data) {
							this.post = res.data
							this.curStep = 2
							if (this.post.auditStatus != 1) {

								this.curStep = 3
							}
						}
					}
				})

			},
			getBank() {
				this.$api.bankList({}, (res) => {
					if (res.code == 200) {
						this.bankList = res.data
					}
				})

			},
			// 省市区联动初始化
			showThreePicker() {
				this.showArea = true
				// this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				console.log(e, 1111)
				this.post.area = e[0].name + " " + e[1].name
				this.post.region = e[1].id
				// if (e[2].name) {
				// 	this.post.area = e[0].name + " " + e[1].name + " " + e[2].name
				// 	this.post.region = e[2].id
				// }
			},

			toAdd() {
				if (this.isDisabled) {
					return
				}
				if(this.bankList.length<=0){
					this.$common.errorToShow('请先绑定银行卡')
					return
				}
				this.isDisabled = true
				let post = JSON.parse(JSON.stringify(this.post))
				
				post.bankId = this.bankList[this.curBank].id
				this.$api.applyForLandlord(post, (res) => {
					if (res.code == 200) {

						this.getInfo()
						this.$common.errorToShow('提交成功')

					} else {

						this.$common.errorToShow(res.message)
						this.isDisabled = false
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.bg-user {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;

	}

	.btn {
		line-height: 80rpx;
		background: #F24646;
		text-align: center;
		width: 100%;
		color: #fff;
	}

	.module-step {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		margin: 0 48rpx;
		position: relative;
		color: #FFAEAE;

		&::after {
			content: '';
			border-top: 1px dashed #FFAEAE;
			position: absolute;
			left: 60rpx;
			right: 60rpx;
			top: 24rpx;
		}

		.item {
			position: relative;
			z-index: 1;

			&.on {
				color: #fff;

				.no {

					background: #fff;
				}
			}
		}

		.no {
			width: 48rpx;
			height: 48rpx;
			background: #FFAEAE;
			border-radius: 50%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #F24646;
			font-size: 32rpx;
		}
	}

	.apply-tips {
		color: #F24646;
	}
</style>